<template>
  <div style="padding: 2em 1em;text-align: center">
    <div v-if="listData == null">loading...</div>
    <div v-if="listData != null">
      <div class="list-item" v-for="(item, idx) in listData" :key="idx">
        <el-button
          @click="
            showConfig = true;
            libIdx = idx;
          "
          :style="{
            width: '100%',
            marginBottom: '1em',
            overflow: 'hidden',
          }"
        >
          <div style="text-align: left">
            <div
              :style="{
                fontSize: '18px',
                padding: '0',
                margin: '0',
                paddingBottom: '10px',
              }"
            >
              {{ item.title }}
            </div>
            <div
              :style="{
                fontSize: '012px',
                padding: '0',
                margin: '0',
                opacity: '0.5',
                paddingBottom: '6px',
              }"
              v-if="item.subtitle"
            >
              {{ item.subtitle }}
            </div>
            <div
              :style="{
                fontSize: '12px',
                padding: '0',
                margin: '0',
                opacity: '0.5',
              }"
            >
              共{{ item.count }}题，{{ item.date }}更新
            </div>
          </div>
        </el-button>
      </div>
    </div>
    <el-dialog
      :visible.sync="showConfig"
      :append-to-body="true"
      :modal-append-to-body="true"
      @before-close="handleCloseConfig"
      :width="modelWidth"
      :destroy-on-close="true"
    >
      <span slot="title">{{ libIdx >= 0 ? listData[libIdx].title : "" }}</span>
      <configView
        v-if="showConfig"
        :item="listData[libIdx]"
        @start="startNew"
      ></configView>
    </el-dialog>
  </div>
</template>

<script>
import configView from "../configView";
export default {
  name: "listView",
  components: {
    configView,
  },
  computed: {
    listData() {
      return this.$store.state.data.list;
    },
    modelWidth() {
      return this.$store.state.style.modelWidth;
    },
  },
  data() {
    return {
      libIdx: -1,
      showConfig: false,
    };
  },
  methods: {
    handleCloseConfig() {
      // this.libIdx = -1;
    },
    startNew(config) {
      window.console.log(config);
      this.showConfig = false;
      this.$router.push({ name: "workout", params: { config: config } });
    },
  },
  created() {
    console.log(this.$route.query);
    if (this.$route.query.show && this.$route.query.show == "extra") {
      this.$store.dispatch("loadExtraList");
    } else if (this.$route.query.show && this.$route.query.show == "full") {
      this.$store.dispatch("loadFullList");
    } else {
      this.$store.dispatch("loadList");
    }
  },
};
</script>
